<template>
  <div>
     <h1>看看你的 {{ num }}</h1>
  <button @click="add">点我num ++ </button>
  <select v-model="selectValue"> <!-- 选择 -->
    <option :value="1">1</option> <!-- :value 就变成动态的了 -->
    <option :value="2">2</option>
    <option :value="3">3</option>
  </select>
  <br>
  <button @click="add2">增加 {{ selectValue }}</button>
  <hr>
  姓名: {{ username }}
  </div>
</template>


<script setup lang="ts">

import {onMounted, ref} from 'vue'

/* 数据 */
let num = ref(0)
let selectValue = ref(1)
let username = ref()


/* 函数 */
function add() {
  num.value += 1
}

function add2() {
  num.value += selectValue.value
}



//发送异步请求
import axios from 'axios'
import {getUserInfo} from '@/api/user'
// axios.post('http://localhost:8080/user/login',null,  {
//     params: {
//       username: '121212',
//       password: '121212'
//     }
//   }
// )
// .then(response => {
//   // 请求成功时的处理逻辑
//   console.log('Response:', response.data);
// })
// .catch(error => {
//   // 请求失败时的处理逻辑
//   console.error('Error:', error);
// });


let data1 = null

data1 =  getUserInfo()
// // username.value = data1.nickname
// console.log(data1);

 const processData = async() =>{
  try {
    const userInfo = await getUserInfo();
    username.value = userInfo.data.username
    console.log("User Info:", userInfo);
    // 在这里处理获取到的用户信息
  } catch (error) {
    console.error("Error:", error);
  }
} 

onMounted(()=>{
  processData()
})

// processData();


// data1.then((res)=>{
//   console.log(res)
//   username.value = res.nickname
// })


</script>


<style scoped>
/* 样式的管理 */
h1 {
  color: skyblue;
}
</style>
